<template>
  <view>
    <u-tabs-swiper active-color="#0071C5" inactive-color="#999999" :list="tabList" :current="tabCurrent"
      @change="change" :is-scroll="false">
    </u-tabs-swiper>
    <view class="report">
      <view style="display: flex;">
        <view v-for="(item,index) in searchList1" class="searchType"
          :class="[typeSel1 === (index + 1) ? 'search-sel' : 'search-nosel']" @click="handleSel1(index + 1)">
          {{item}}
        </view>
      </view>
      <view style="display: flex;justify-content: flex-end;">
        <view v-for="(item,index) in searchList2" class="searchType" style=""
          :class="[typeSel2 === (index + 1) ? 'search-sel' : 'search-nosel']" @click="handleSel2(index + 1)">
          {{item}}
        </view>
      </view>
    </view>


    <!-- #ifdef APP-PLUS || H5 -->
    <view class="content echarts" @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts"
      id="echarts2" style="padding-right: 200rpx;"></view>
    <!-- #endif -->
    <!-- #ifndef APP-PLUS || H5 -->
    <view>非 APP、H5 环境不支持</view>
    <!-- #endif -->
  </view>
</template>

<script>
  import echarts from '../../../../../static/common/js/echarts.min.js'
  export default {
    props: {
      //地图级别
      level: {
        type: Number,
        default: 1
      },
      //区域IDs
      provinceIds: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        searchList1: ["全部", "房屋建筑", "土地"],
        searchList2: ["数量", "价格", "面积"],
        tabList: [{
            name: '商用'
          },
          {
            name: '自用'
          }
        ],
        tabCurrent: 0,
        swiperCurrent: 0,
        typeSel1: 1,
        typeSel2: 1,
        //数据源
        pieData1: [],
        pieData2: [],

        //报表数据源
        // option: {
        //   tooltip: {
        //     trigger: 'item'
        //   },
        //   legend: {
        //     top: '30%',
        //     right: '20%',
        //     left: 'right',
        //     orient: 'vertical',
        //     icon: "circle",
        //     itemWidth: 6,
        //     itemGap: 20,
        //   },
        //   //数据源配置
        //   series: [],
        // },
        option: {
          color: ["#1DBE7D", "#FF7600", "#0071C5", "#FF6851"],
          legend: {
            orient: 'vertical',
            right: 10,
            y: 'center',
            textStyle: {
              color: '#333',
              fontSize: 10
            },
            itemWidth: 12,
            itemHeight: 8,
            itemGap: 30,
            data: ['使用中', '闲置中', '已出租', '已抵押']
          },
          calculable: true,
          series: [{
            type: 'pie',
            radius: ['20%', '40%'],
            center: ['42%', '50%'],
            // roseType: 'area',
            zlevel: 10,
            label: {
              formatter: function(params) {
                return params.data.value + "(" + params.data.unit + ")\n\n{b|" + params.data.stauts + "}";
              },
              borderWidth: 0,
              borderRadius: 4,
              padding: [0, -45],
              height: 30,
              fontSize: 12,
              align: 'center',
              rich: {
                b: {

                  fontSize: 12,
                  lineHeight: 5,
                  color: '#333'
                }
              },
              emphasis: {
                show: true,
                formatter: function(params) {
                  return params.data.value + "(" + params.data.unit + ")\n\n{b|" + params.data.stauts + "}";
                },
                padding: [0, -45],
                height: 36,
                fontSize: 14,
                rich: {
                  b: {
                    fontSize: 14,
                    lineHeight: 5,
                    color: '#000'
                  }
                }
              }

            },
            labelLine: {
              normal: {
                show: true,
                length: 15,
                length2: 50
              },
              emphasis: {
                show: true
              }
            },
            data: []
          }, {
            type: 'pie',
            radius: ['20%', '20%'],
            center: ['42%', '50%'],
            zlevel: 10,
            label: {

              formatter: '{b|{c}%}',
              padding: [0, -10],
              position: 'outside',
              color: '#fff',
              borderWidth: 0,
              borderRadius: 4,
              fontSize: 10,
              rich: {
                b: {

                  fontSize: 12,
                  lineHeight: 5,
                  color: '#fff'
                }
              },

            },
            labelLine: {

              normal: {
                show: false,
                color: "transparent",
                length: 16,
                length2: 0
              },
              emphasis: {
                show: true
              }
            },
            data: []
          }]
        }
      }
    },
    watch: {
      immediate: true,
      provinceIds: function(newQuestion, oldQuestion) {
        this.loadDataByType()
      }
    },
    mounted() {
      this.loadDataByType()
    },
    methods: {
      loadDataByType() {
        let _query = {
          level: this.level,
          dataStatusType: this.typeSel1,
          immovableType: this.typeSel2,
          usePurpose: (this.tabCurrent + 1)
        }
        if (this.provinceIds) {
          _query.provinceIds = this.provinceIds
        }
        this.$u.api.statisticsAssetStatus(_query).then(res => {
          if (!res) {
            return
          }
          this.pieData1 = []
          this.pieData2 = []
          for (let i = 0; i < res.length; i++) {
            let _new = {
              value: res[i].value,
              name: res[i].name,
              unit: res[i].unite ? res[i].unite : '无',
              per: res[i].value,
              stauts: res[i].name,
            }
            this.pieData1.push(_new)
            let _new2 = {
              value: res[i].value,
              name: res[i].name,
            }
            this.pieData2.push(_new2)
          }
          
          this.option.series[0].data = this.pieData1
          this.option.series[1].data = this.pieData2
          // let _ser = this.initData()
          // this.option.series = []
          // this.option.series.push(_ser)
        }).catch(err => {
          console.error(err)
        })
      },
      //一层改变
      change(index) {
        this.tabCurrent = index
        this.loadDataByType()
      },
      //点击按钮事件
      handleSel1(selIndex) {
        if (this.typeSel1 != selIndex) {
          this.typeSel1 = selIndex
          this.loadDataByType()
        }
      },
      //点击按钮事件
      handleSel2(selIndex) {
        if (this.typeSel2 != selIndex) {
          this.typeSel2 = selIndex
          this.loadDataByType()
        }
      },
      //报表柱体点击事件
      onViewClick(options) {
        selected: true
        //初始化基础数据
        let _ser = this.initData()
        //找到被点击柱体
        let _index = this.pieData.findIndex((item) => {
          return item.name == options.name
        })
        //改变被点击圆环选中状态
        // _ser[_index].selected = true
        //改变报表数据
        this.option.series = []
        this.option.series.push(_ser)
      }
    }
  }
</script>

<script module="echarts" lang="renderjs">
  let myChart
  export default {
    data() {
      return {
        opntions: []
      }
    },
    mounted() {
      if (typeof window.echarts === 'function') {
        this.initEcharts()
      } else {
        // 动态引入较大类库避免影响页面展示
        const script = document.createElement('script')
        // view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
        script.src = 'static/common/js/echarts.min.js'
        this.opntions = this.option
        script.onload = this.initEcharts.bind(this)
        document.head.appendChild(script)
      }
    },
    methods: {
      initEcharts() {
        myChart = echarts.init(document.getElementById('echarts2'))

        this.opntions.series[0].label.formatter = function(params) {
            //return params.value
            return params.data.value + "(" + params.data.unit + ")\n\n{b|" + params.data.stauts + "}";
          },
          this.opntions.series[0].label.formatter = function(params) {
            //return params.value
            return params.data.value + "(" + params.data.unit + ")\n\n{b|" + params.data.stauts + "}";
          },
          myChart.setOption(this.option)


        myChart.setOption(this.opntions)

      },
      updateEcharts(newValue, oldValue, ownerInstance, instance) {
        // 监听 service 层数据变更
        setTimeout(myChart.setOption(newValue), 500)
      },
      onClick(event, ownerInstance) {
        // 调用 service 层的方法
        // ownerInstance.callMethod('onViewClick', {
        // 	test: 'test'
        // })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .report {
    display: flex;
    margin-top: 20rpx;
    justify-content: space-between
  }

  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .echarts {
    margin-top: 10rpx;
    width: 100%;
    height: 900rpx;
  }

  .searchType {
    width: 128rpx;
    height: 54rpx;
    border-radius: 66rpx;
    font-size: 30rpx;
    font-weight: 400;
    line-height: 54rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 40rpx;
  }

  .search-nosel {
    background: #F5F7F9;
    color: #999999
  }

  .search-sel {
    background: #0071C5;
    color: #FFFFFF;
  }
</style>
